<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 公共样式 -->
    <link rel="stylesheet" href="css/public.css">
    <!-- 分类 -->
    <link rel="stylesheet" href="css/class.css">
    <!-- 重置样式 -->
    <link rel="stylesheet" href="css/reset.css">
    <title>分类</title>
</head>

<body>
    <!-- top s -->
    <header class=" header clearfix">
        <!-- 返回按钮 -->
        <div class="back fl">
            <h2>Back</h2>
        </div>
        <!-- 下拉框 -->
        <div class="select fr">
            <select name="">
                    <option value="1">广州市</option>
                    <option value="2">深圳市</option>
                    <option value="3">佛山市</option>
                </select>
        </div>
        <h1 class="class">
            分类
        </h1>
    </header>
    <!-- top e-->
    <!-- 主体部分 s -->
    <section id="main">
        <!-- 轮播图 s -->
        <section class="banner">
            <div class="swiper-container">
                <div class="swiper-wrapper clearfix">
                    <div class="swiper-slide fl"><img src="img/class/banner_1.jpg" alt="">
                        <h2>美食</h2>
                    </div>
                    <div class="swiper-slide fl"><img src="img/class/banner_2.jpg" alt="">
                        <h2>电影</h2>
                    </div>

                    <div class="swiper-slide fl"><img src="img/class/banner_3.jpg" alt="">
                        <h2>运动</h2>
                    </div>
                    <div class="swiper-slide fl"><img src="img/class/banner_4.jpg" alt="">
                        <h2>唱歌</h2>
                    </div>

                </div>
                <div class="swiper-pagination">
                    <span class="active"></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </section>
        <!-- 轮播图 e-->
        <!-- 主体内容 s -->
        <div class="content_detail">
            <!-- 美食类 s -->
            <section class="food">
                <div class="content_dd content_dd_sport clearfix">
                    <aside class="info_left fl">
                        <div class="info_left_img"><img src="img/class/food.jpg" alt=""></div>
                        <h2>美食类</h2>
                    </aside>
                    <article class="info_right fr">
                        <h2>更多</h2>
                        <div class="more">
                            <a href="">
                                <img src="img/index/more.jpg" alt="">
                            </a>
                        </div>
                    </article>
                </div>
                <div class="sports_detail clearfix">
                    <ul class="clearfix">
                        <li class="fl">
                            <a href=""><img src="img/class/food_detail_1.jpg" alt=""></a>
                        </li>
                        <li class="fl">
                            <a href=""><img src="img/class/food_detail_2.jpg" alt=""></a>
                        </li>
                        <li class="fl">
                            <a href=""><img src="img/class/food_detail_3.jpg" alt=""></a>
                        </li>
                        <li class="fl">
                            <a href=""><img src="img/class/food_detail_4.jpg" alt=""></a>
                        </li>
                    </ul>
                </div>
            </section>
            <!-- 美食类 e -->
            <!-- 运动类 s -->

            <section class="sports">
                <div class="content_dd content_dd_sport clearfix">
                    <aside class="info_left fl">
                        <div class="info_left_img"><img src="img/class/movement.jpg" alt=""></div>
                        <h2>运动类</h2>
                    </aside>
                    <article class="info_right fr">
                        <h2>更多</h2>
                        <div class="more">
                            <a href="">
                                <img src="img/index/more.jpg" alt="">
                            </a>
                        </div>
                    </article>
                </div>
                <div class="sports_detail clearfix">
                    <ul class="clearfix">
                        <li class="fl">
                            <a href=""><img src="img/class/movement_detail_1.jpg" alt=""></a>
                        </li>
                        <li class="fl">
                            <a href=""><img src="img/class/movement_detail_2.jpg" alt=""></a>
                        </li>
                        <li class="fl">
                            <a href=""><img src="img/class/movement_detail_3.jpg" alt=""></a>
                        </li>
                        <li class="fl">
                            <a href=""><img src="img/class/movement_detail_4.jpg" alt=""></a>
                        </li>
                    </ul>
                </div>
            </section>
            <!-- 运动类 e-->
            <!-- 电影类 s -->
            <section class="movie">
                <div class="content_dd content_dd_sport clearfix">
                    <aside class="info_left fl">
                        <div class="info_left_img"><img src="img/class/movie.jpg" alt=""></div>
                        <h2>电影类</h2>
                    </aside>
                    <article class="info_right fr">
                        <h2>更多</h2>
                        <div class="more">
                            <a href="">
                                <img src="img/index/more.jpg" alt="">
                            </a>
                        </div>
                    </article>
                </div>
                <div class="sports_detail clearfix">
                    <ul class="clearfix">
                        <li class="fl">
                            <a href=""><img src="img/class/movie_detail_2.jpg" alt=""></a>
                        </li>
                        <li class="fl">
                            <a href=""><img src="img/class/movie_detail_2.jpg" alt=""></a>
                        </li>
                        <li class="fl">
                            <a href=""><img src="img/class/movie_detail.jpg" alt=""></a>
                        </li>
                        <li class="fl">
                            <a href=""><img src="img/class/movie_detail.jpg" alt=""></a>
                        </li>
                    </ul>
                </div>
            </section>
            <!-- 电影类e -->
        </div>
        <!-- 主体内容 e-->
    </section>
    <!-- 主体部分 e-->
    <!--底部 S -->
    <footer class=" footer clearfix">
        <div class="home fl">
            <div>
                <a href="index.html">
                    <img src="img/index/index.jpg" alt="">
                </a>
                <h3>首页</h3>
            </div>

        </div>
        <div class="class fl">
            <div>
                <a href="class.html">
                    <img src="img/index/classFix.jpg" alt="">
                </a>
                <h3>分类</h3>
            </div>

        </div>
        <div class="find fl">
            <div>
                <a href="find.html">
                    <img src="img/index/find.jpg" alt="">
                </a>
                <h3>发现</h3>
            </div>

        </div>
        <div class="mine fl">
            <div>
                <a href="mine.html">
                    <img src="img/index/my.jpg" alt="">
                </a>
                <h3>我的</h3>
            </div>

        </div>
    </footer>
    <!--底部 E-->
</body>
<script src="js/index.js">
</script>

</html>